<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: #6ff;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    // 隐式类型转换  => 浏览器在运算过程中的默认转化机制 

    // 强制类型转换  => 浏览器页提供了将数据强制转换为  number ,string ,boolean的方法

    // parseInt()  parseFloat()     主要用于处理 字符串和数字  => 数字
    // parseInt()  将其他类型转化为整型(整数)  => (1) 去单位  (2) 向下取整(如果有小数)
    //             规律:找到第一个非数字之前的数,将其转化为整数
    // parseFloat() 将其他类型转化为浮点型(浮点数 => 小数)

    // 需求: 获取box的宽高  "200px"  "200.5px"  
    
    // console.log(Number("200px")); // NaN

    // console.log(parseInt("200px"));     // 200
    // console.log(parseInt("200.55px"));  // 200
    // console.log(parseInt("20a0.55px")); // 20
    // console.log(parseInt("a200.55px")); // NaN

    // console.log(parseInt(200.55)); // 200

    console.log(parseFloat("200.55px"));  // 200.55
    console.log(parseFloat("200px"));    // 200
    console.log(parseFloat("a200px"));   // NaN

    console.log(parseFloat(200.55));   // NaN





</script>
</html>